<template>
  <div class="style-component">
    <textarea ref="mycode"></textarea>
    <el-button type="primary" size="mini" class="button" @click="getValue"
      >保存修改</el-button
    >
  </div>
</template>

<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars";
let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/css/css");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/css-hint");
export default {
  name: "codeMirror",
  props: {
    styleText: String,
  },
  data() {
    return {
      editor: "",
    };
  },
  mounted() {
    let mime = "css";
    this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: mime, //选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      theme: "ambiance",
      autofocus: true,
      extraKeys: { Ctrl: "autocomplete" }, //自定义快捷键
      hintOptions: {
        completeSingle: false,
      },
    });
    this.editor.on("inputRead", (e, c) => {
      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
      if (c.text[0].match(reg)) {
        this.editor.showHint();
      }
    });
  },
  methods: {
    getValue() {
      this.$emit("update:styleText", this.editor.getValue());
    },
  },
};
</script>

<style lang="scss">
.style-component {
  .button {
    position: absolute;
    z-index: 2;
    left: 40%;
    bottom: 10px;
  }
}
.CodeMirror-hints {
  max-height: 200px !important;
  text-align: left;
}
</style>